<!-- 的页面 -->
<template>
  <div
    v-loading="loading || hostUserChangeType"
    :element-loading-text="elementLoadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="w-full h_100vh c_main fs_14 bg-[--background]"
    id="videoMeeting"
  >
    <div v-if="!loading" class="r-f h-full">
      <div class="videoMeetingBox c-f relative">
        <div class="videoMeeting_content relative r-f h_flexGrow">
          <!-- 短信弹幕 -->
          <ul
            v-if="noticeState"
            id="noticeList"
            ref="noticeList"
            class="max-h-[108px] text-xs absolute z-10 bottom-[36px] left-4 text-theme overflow-hidden pt-2"
          >
            <li
              v-for="(item, index) in noticeList"
              :key="index"
              style="width: fit-content"
              class="h-[28px] pb-2"
            >
              <div
                class="flex items-center px-2 bg-[var(--backgroundv2-05)] h-full box-border rounded"
              >
                <span v-show="item.action === 'send'">{{
                  $t('sMSHasBeenSentTo')
                }}</span>
                <span class="text-main mx-1">{{ item.phone }}</span>
                <span v-show="item.action === 'in'">{{
                  $t('connected-0')
                }}</span>
                <span v-show="item.action === 'out'">{{ $t('exitRoom') }}</span>
              </div>
            </li>
          </ul>
          <!-- 会议有摄像头的成员 -->
          <div
            v-loading="memberLoading"
            :element-loading-text="$t('dataIsBeingGenerated')"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            @click="componentsFn('memberType', false)"
            :class="
              componentsObj.memberType ? 'componentsOpen' : 'componentsClose'
            "
            class="videoMeeting_content_member"
          >
            <!-- 成员内容 -->
            <div class="components h_100vh">
              <div class="videoMeeting_member c-f">
                <!--                <div class="videoMeeting_title centerBox c_theme">-->
                <!--                  <svg-icon-->
                <!--                    svg-name="videoMeeting_titleLeft"-->
                <!--                    className="svgBox"-->
                <!--                  />-->
                <!--                  <span class="videoMeeting_title_txt">{{-->
                <!--                    $t('liveConnection')-->
                <!--                  }}</span>-->
                <!--                  <svg-icon-->
                <!--                    svg-name="videoMeeting_titleRight"-->
                <!--                    className="svgBox"-->
                <!--                  />-->
                <!--                </div>-->
                <div class="h_flexGrow">
                  <!-- 成员区域内容 -->
                  <div v-if="memberVideoList.length" class="h_100vh c-f">
                    <!-- 成员设置 -->
                    <div class="memberZoneSettings r-f fs_12">
                      <div class="f-g">
                        <p
                          v-show="speakingDeviceList.length === 0"
                          class="over_one_line c_auxiliary"
                        >
                          {{ $t('speaking') }}
                        </p>
                        <p
                          v-show="speakingDeviceList.length"
                          class="over_one_line"
                        >
                          <span class="c_success">
                            {{ $t('no') }}
                          </span>
                          <span
                            v-for="(
                              speakingDevice, speakingDeviceIndex
                            ) in speakingDeviceList"
                            :key="'speakingDeviceList' + speakingDeviceIndex"
                          >
                            <span
                              v-if="
                                speakingDevice.deviceId === clientId &&
                                (hostUserStatus || !memberAudioStatus)
                              "
                            >
                              {{ $t('speaking-0') }}
                            </span>
                            <span v-else>
                              {{
                                speakingDevice.name ||
                                speakingDevice.devName ||
                                speakingDevice.deviceId
                              }}
                            </span>
                            <span
                              v-show="
                                speakingDeviceIndex !==
                                speakingDeviceList.length - 1
                              "
                              >、</span
                            >
                          </span>
                        </p>
                      </div>
                      <div class="flex-shrink-0 ml-2 flex items-center">
                        <el-popover
                          placement="bottom"
                          trigger="click"
                          popper-class="popover_echarts popover_theme w-[500px]"
                        >
                          <div class="c_auxiliary fs_12">
                            <div class="h_30 lh_30 plr_10 mt_10">
                              <i class="el-icon-warning-outline"></i>
                              {{
                                $t('viewSettingsAreOnlyEffectiveForYourself')
                              }}
                            </div>
                            <ul
                              class="pictureLayout fs_12 fw_600"
                              style="padding: 0 8px 10px"
                            >
                              <li
                                v-for="(
                                  videoLayoutItem, videoLayoutIndex
                                ) in videoLayoutList"
                                :key="'videoLayoutItem' + videoLayoutIndex"
                                @click="
                                  memberVideoListStatusFn(
                                    videoLayoutItem.params
                                  )
                                "
                                :class="{
                                  selectBox:
                                    memberVideoListStatus ===
                                    videoLayoutItem.params
                                }"
                                class="c-f clickBox centerBox"
                              >
                                <svg-icon
                                  :svg-name="videoLayoutItem.svgName"
                                  className="svgBox"
                                />
                                <p class="txt_box">
                                  {{ videoLayoutItem.name }}
                                </p>
                              </li>
                            </ul>
                          </div>
                          <div
                            slot="reference"
                            class="centerBox clickBox ml-2"
                            v-show="
                              memberVideoList.length <= 6 &&
                              memberVideoList.length > 1
                            "
                          >
                            <svg-icon
                              svg-name="videoMeeting_functionSetting"
                              style="
                                width: 12px;
                                height: 12px;
                                margin-right: 4px;
                              "
                              className="svgBox"
                            />
                            {{ $t('viewSettings') }}
                          </div>
                        </el-popover>
                      </div>
                    </div>
                    <!-- 成员视频列表 -->
                    <div class="videoList h_flexGrow">
                      <div
                        ref="memberVideoList"
                        class="h-full max-h-full overflow-auto"
                      >
                        <draggable
                          handle=".mover"
                          v-model="memberVideoListV2"
                          :disabled="false"
                          class="w-full h-full"
                          :move="onMove"
                          @end="onEnd"
                        >
                          <transition-group
                            :class="{
                              'flex flex-wrap justify-center':
                                memberVideoListStatus !== 'videoList_left' &&
                                memberVideoListStatus !== 'videoList_right' &&
                                memberVideoListStatus !== 'videoList_top_l' &&
                                memberVideoListStatus !== 'videoList_bottom_l'
                            }"
                            class="w-full h-full"
                          >
                            <div
                              v-for="(userItem, userIndex) in memberVideoList"
                              :key="'userList_' + userIndex"
                              :style="{
                                height: `${getHeight(userIndex)}%`,
                                width: `${getWidth(userIndex)}%`
                              }"
                              :class="{
                                'float-left':
                                  memberVideoListStatus === 'videoList_right' ||
                                  memberVideoListStatus === 'videoList_top_l' ||
                                  memberVideoListStatus ===
                                    'videoList_bottom_l',
                                'float-right':
                                  memberVideoListStatus === 'videoList_left',
                                'fixed top-0 left-0 !w-full !h-full z-[100] bg-background':
                                  currentZoomIn.deviceId === userItem.deviceId
                              }"
                            >
                              <div class="p-1 box-border w-full h-full">
                                <div
                                  :class="{
                                    speaking:
                                      userItem.audioContextType &&
                                      userItem.audioPushing,
                                    noSpeaking: userItem.muted === 1
                                  }"
                                  class="item_box relative group"
                                >
                                  <div
                                    v-if="
                                      notificationShareStatus !== 'shareCanvas'
                                    "
                                    class="absolute top-0 left-0 w-full z-10 mover"
                                  >
                                    <div
                                      class="item_information_box hidden group-hover:flex"
                                    >
                                      <div></div>
                                      <div
                                        class="centerBox item_title_operate flex-shrink"
                                      >
                                        <!-- 画面缩小 -->
                                        <el-tooltip
                                          v-delTabIndex
                                          :open-delay="500"
                                          class="item"
                                          effect="dark"
                                          v-if="
                                            currentZoomIn.deviceId ===
                                            userItem.deviceId
                                          "
                                          :content="
                                            $t('openMicrophoneByDefault')
                                          "
                                          placement="top"
                                        >
                                          <svg-icon
                                            v-if="share !== 'shareScreen'"
                                            @click.native="exitLargeScreenFn()"
                                            svg-name="icon_reduce"
                                            className="svgBox clickBox"
                                          />
                                        </el-tooltip>
                                        <!-- 放大 -->
                                        <el-tooltip
                                          v-else
                                          v-delTabIndex
                                          :open-delay="500"
                                          class="item"
                                          effect="dark"
                                          :content="$t('zoomInTheScreen')"
                                          placement="top"
                                        >
                                          <svg-icon
                                            @click.native="
                                              currentZoomInFn(userItem)
                                            "
                                            svg-name="icon_amplify"
                                            className="svgBox clickBox"
                                          />
                                        </el-tooltip>
                                        <!-- 移除 -->
                                        <el-tooltip
                                          v-delTabIndex
                                          :open-delay="500"
                                          class="item"
                                          effect="dark"
                                          :content="$t('removeMembers')"
                                          placement="top"
                                        >
                                          <svg-icon
                                            @click.native="
                                              memberKickOutFn(userItem)
                                            "
                                            v-if="
                                              hostUserStatus &&
                                              userItem.deviceId !== clientId
                                            "
                                            svg-name="icon_close"
                                            className="closeBox svgBox clickBox"
                                          />
                                        </el-tooltip>
                                      </div>
                                    </div>
                                    <div class="flex justify-end">
                                      <!-- 成员静音-->
                                      <div
                                        v-if="userItem.deviceId !== clientId"
                                      >
                                        <el-tooltip
                                          v-if="userItem.memberSoundStatus"
                                          class="item"
                                          effect="dark"
                                          :content="$t('clickToUnmute')"
                                          placement="top-start"
                                        >
                                          <div
                                            class="w-6 h-6 box-border bg-dangerv2 rounded mt-1 mr-1 center centerBox"
                                            @click="
                                              memberSoundFn(userItem.deviceId)
                                            "
                                          >
                                            <svg-icon
                                              svg-name="videoMeeting_closeSound"
                                              className="svgBox !w-[64%] !h-[64%]"
                                            />
                                          </div>
                                        </el-tooltip>
                                        <el-tooltip
                                          v-else
                                          class="item"
                                          effect="dark"
                                          :content="$t('clickToMuteMembers')"
                                          placement="top-start"
                                        >
                                          <div
                                            class="w-6 h-6 box-border bg-backgroundv2 rounded mt-1 mr-1 center centerBox hidden group-hover:flex"
                                            @click="
                                              memberSoundFn(userItem.deviceId)
                                            "
                                          >
                                            <svg-icon
                                              svg-name="videoMeeting_openSound"
                                              className="svgBox !w-[64%] !h-[64%]"
                                            />
                                          </div>
                                        </el-tooltip>
                                      </div>
                                      <!-- 麦克风_主持人操作 (控制禁言) -->
                                      <div
                                        v-if="
                                          hostUserStatus &&
                                          userItem.deviceId !== clientId
                                        "
                                      >
                                        <el-tooltip
                                          v-if="userItem.muted === 1"
                                          class="item"
                                          effect="dark"
                                          :content="$t('clickToUnmute-0')"
                                          placement="top-start"
                                        >
                                          <div
                                            class="w-6 h-6 box-border bg-dangerv2 rounded mt-1 mr-1 center centerBox"
                                            @click="
                                              memberAudioFn(
                                                userItem.deviceId,
                                                2
                                              )
                                            "
                                          >
                                            <svg-icon
                                              svg-name="videoMeeting_closeAudio"
                                              className="svgBox !w-[64%] !h-[64%]"
                                            />
                                          </div>
                                        </el-tooltip>
                                        <el-tooltip
                                          v-else
                                          class="item"
                                          effect="dark"
                                          :content="
                                            $t('clickToOpenEnableMuting')
                                          "
                                          placement="top-start"
                                        >
                                          <div
                                            class="w-6 h-6 box-border bg-backgroundv2 rounded mt-1 mr-1 center centerBox hidden group-hover:flex"
                                            @click="
                                              memberAudioFn(
                                                userItem.deviceId,
                                                1
                                              )
                                            "
                                          >
                                            <svg-icon
                                              svg-name="videoMeeting_openAudio"
                                              className="svgBox !w-[64%] !h-[64%]"
                                            />
                                          </div>
                                        </el-tooltip>
                                      </div>
                                    </div>
                                  </div>
                                  <div
                                    class="centerBox pos_r c_auxiliary w_100vh h_100vh"
                                    :id="`itemId_${userItem.deviceId}`"
                                  >
                                    <userHeadPortrait
                                      :iconType="false"
                                      class="!w-[50px] !h-[50px]"
                                      :device="{
                                        ...userItem,
                                        onlineState: 1
                                      }"
                                    ></userHeadPortrait>
                                    <!--                                    <svg-icon-->
                                    <!--                                      svg-name="videoMeeting_waitingScreen"-->
                                    <!--                                      className="placeholder_svg"-->
                                    <!--                                    />-->
                                  </div>
                                  <div
                                    class="item_information_box absolute bottom-0 left-0 flex"
                                  >
                                    <div class="flex-shrink-0 centerBox mr-1">
                                      <!-- 主持人标识 -->
                                      <div
                                        v-if="
                                          hostUserDevice &&
                                          userItem.deviceId ===
                                            hostUserDevice.deviceId
                                        "
                                        class="isHostUser centerBox p-1 c_main bg-[var(--warning)] mr-1 rounded"
                                      >
                                        <svg-icon
                                          style="
                                            width: 0.875rem;
                                            height: 0.875rem;
                                          "
                                          svg-name="videoMeeting_isHostUser"
                                          className="svgBox flex-shrink-0"
                                        />
                                      </div>
                                      <!-- 禁止 || 没有开麦-->
                                      <svg-icon
                                        v-if="
                                          userItem.muted === 1 ||
                                          !userItem.audioPushing
                                        "
                                        svg-name="videoMeeting_prohibitSpeech"
                                        className="svgBox clickBox"
                                      />
                                      <!-- 开麦在讲话 -->
                                      <svg-icon
                                        v-else-if="userItem.audioContextType"
                                        svg-name="videoMeeting_speaking"
                                        className="svgBox c_success"
                                      />
                                      <!-- 开麦没讲话 -->
                                      <svg-icon
                                        v-else
                                        svg-name="videoMeeting_noSpeech"
                                        className="svgBox"
                                      />
                                    </div>
                                    <div class="flex-grow w-0 flex">
                                      <el-tooltip
                                        v-delTabIndex
                                        :open-delay="500"
                                        class="item"
                                        effect="dark"
                                        content="content"
                                        placement="top"
                                      >
                                        <div slot="content" class="c_auxiliary">
                                          <span class="c_main mr-1">{{
                                            userItem.name || userItem.devName
                                          }}</span>
                                          <span v-if="userItem.jobNum">
                                            ({{ userItem.jobNum }})</span
                                          >
                                          <span v-else-if="userItem.deviceId">
                                            ({{ userItem.deviceId }})</span
                                          >
                                        </div>
                                        <div class="over_one_line c_main">
                                          <span class="c_main mr-1">{{
                                            userItem.name || userItem.devName
                                          }}</span>
                                          <span v-if="userItem.jobNum">
                                            ({{ userItem.jobNum }})</span
                                          >
                                          <span v-else-if="userItem.deviceId">
                                            ({{ userItem.deviceId }})</span
                                          >
                                        </div>
                                      </el-tooltip>
                                    </div>
                                    <!--                                    <el-tooltip-->
                                    <!--                                      v-delTabIndex-->
                                    <!--                                      :open-delay="500"-->
                                    <!--                                      class="item"-->
                                    <!--                                      effect="dark"-->
                                    <!--                                      :content="$t('annotation')"-->
                                    <!--                                      placement="top"-->
                                    <!--                                    >-->
                                    <!--                                      <div-->
                                    <!--                                        v-if="-->
                                    <!--                                          currentZoomIn.deviceId ===-->
                                    <!--                                            userItem.deviceId &&-->
                                    <!--                                          notificationShareStatus !==-->
                                    <!--                                            'shareCanvas'-->
                                    <!--                                        "-->
                                    <!--                                        class="centerBox c_main w-[24px] h-[24px] rounded-full annotation_button clickBox"-->
                                    <!--                                        @click="pageGraffitiShow()"-->
                                    <!--                                      >-->
                                    <!--                                        <svg-icon-->
                                    <!--                                          style="width: 14px; height: 14px"-->
                                    <!--                                          svg-name="videoMeeting_pictureAnnotations"-->
                                    <!--                                          className="svgBox"-->
                                    <!--                                        />-->
                                    <!--                                      </div>-->
                                    <!--                                    </el-tooltip>-->
                                  </div>
                                </div>
                              </div>
                            </div>
                          </transition-group>
                        </draggable>
                      </div>
                    </div>
                  </div>
                  <!-- 无成员内容 -->
                  <div v-else class="h_100vh centerBox">
                    <div
                      class="c_auxiliary noDataBox centerBox fs_14 css-text-no-select tac"
                    >
                      <div>
                        <svg-icon
                          svg-name="videoMeeting_waitingScreen"
                          className="svgBox"
                        />
                        <p class="mt_20">{{ $t('noMemberScreen') }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <svg-icon
              svg-name="videoMeeting_expansion_left"
              className="open_svgBox juzhong"
            />
          </div>
        </div>
        <!-- 会议操作区 -->
        <div class="relative">
          <!--          -->
          <div
            :class="{
              'top-[20px]': !componentsObj.meetingSmsLogsType
            }"
            class="absolute right-[.5rem] w-[300px] h-[21.5rem] -top-[22rem] z-10 duration-500"
          >
            <videoMeetingSmsLogs
              :meetingSmsLogsType="componentsObj.meetingSmsLogsType"
              :gasCaseId="gasCaseId"
              @on-noticeState="noticeStateFn"
              ref="videoMeetingSmsLogs"
            >
              <template #operator-close>
                <svg-icon
                  @click.native="componentsFn('meetingSmsLogsType', true)"
                  style="width: 0.875rem; height: 0.875rem"
                  svg-name="videoMeeting_close"
                  className="clickBox svgBox absolute right-2 videoMeeting_close"
                />
              </template>
            </videoMeetingSmsLogs>
          </div>
          <!--  成员展示区域  -->
          <div
            :class="{
              'top-[20px]': !componentsObj.userListComponentsType
            }"
            class="c-f c_auxiliary userListComponents absolute right-[.5rem] w-[300px] rounded text-xs duration-500 -top-[22rem] z-10 h-[21.5rem]"
          >
            <div>
              <div
                class="centerBox c_main h-[1.875rem] border-b border-solid border-[var(--border)] bg-[var(--backgroundv2)]"
              >
                <span>{{ $t('memberList') }}</span>
                <svg-icon
                  @click.native="componentsFn('userListComponentsType', true)"
                  style="width: 0.875rem; height: 0.875rem"
                  svg-name="videoMeeting_close"
                  className="clickBox svgBox absolute right-2 videoMeeting_close"
                />
              </div>
            </div>
            <!-- 房间中 -->
            <ul class="userList_box h-0 flex-grow">
              <div
                v-show="joinedUserList.length === 0"
                class="centerBox h-full"
              >
                <div class="tac">
                  <svg-icon
                    svg-name="noData"
                    className="svgBox !w-[50px] !h-[50px]"
                  />
                  <div class="mt_10">{{ $t('noMember') }}</div>
                </div>
              </div>
              <li
                :class="{
                  speaking: userItem.audioContextType && userItem.audioPushing,
                  noSpeaking: userItem.muted === 1
                }"
                v-for="(userItem, index) in joinedUserList"
                :key="index + '_joinedUserList'"
              >
                <div class="r-f flex w-0 flex-grow items-center c_main">
                  <!-- 主持人 -->
                  <svg-icon
                    v-if="userItem.isHostUser"
                    svg-name="videoMeeting_isHostUser"
                    className="svgBox flex-shrink-0 c_theme"
                  />
                  <!-- 平台用户 -->
                  <svg-icon
                    v-else-if="userItem.deviceUserId"
                    svg-name="personnel"
                    className="svgBox flex-shrink-0"
                  />
                  <!-- 设备用户 -->
                  <svg-icon
                    v-else
                    :svg-name="checkDeviceTypeFn(userItem.deviceType, 1)"
                    className="svgBox flex-shrink-0"
                  />

                  <div class="over_one_line c_auxiliary ml-2">
                    <span class="c_main">{{
                      userItem.name || userItem.devName
                    }}</span>
                    <span v-if="userItem.isHostUser" class="c_theme">
                      ({{ $t('host') }}</span
                    >
                    <span
                      v-else-if="userItem.deviceId === clientId"
                      class="c_success"
                    >
                      ({{ $t('me') }}</span
                    >
                    <span v-else-if="userItem.jobNum">
                      ({{ userItem.jobNum }})</span
                    >
                    <span v-else-if="userItem.deviceId">
                      ({{ userItem.deviceId }})</span
                    >
                  </div>
                </div>
                <!-- 操作区域 -->
                <div class="ml-2 flex-shrink operate flex">
                  <!-- 移除成员 -->
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="$t('removeMembers')"
                    placement="top-start"
                  >
                    <div
                      v-if="hostUserStatus && userItem.deviceId !== clientId"
                      @click="memberKickOutFn(userItem)"
                    >
                      <svg-icon
                        svg-name="deleteV3"
                        className="svgBox clickBox deleteBox c_dangerv2"
                      />
                    </div>
                  </el-tooltip>

                  <!-- 成员静音-->
                  <div v-if="userItem.deviceId !== clientId">
                    <div
                      v-if="userItem.memberSoundStatus"
                      @click="memberSoundFn(userItem.deviceId)"
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('clickToUnmute')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_closeSound"
                          className="svgBox clickBox c_dangerv2"
                        />
                      </el-tooltip>
                    </div>
                    <div v-else @click="memberSoundFn(userItem.deviceId)">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('clickToMuteMembers')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_openSound"
                          className="svgBox clickBox c_theme"
                        />
                      </el-tooltip>
                    </div>
                  </div>

                  <!-- 麦克风_主持人操作 (控制禁言) -->
                  <div v-if="hostUserStatus && userItem.deviceId !== clientId">
                    <div
                      v-if="userItem.muted === 1"
                      @click="memberAudioFn(userItem.deviceId, 2)"
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('clickToUnmute-0')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_closeAudio"
                          className="svgBox clickBox c_dangerv2"
                        />
                      </el-tooltip>
                    </div>
                    <div v-else @click="memberAudioFn(userItem.deviceId, 1)">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('clickToOpenEnableMuting')"
                        placement="top-start"
                      >
                        <svg-icon
                          :svg-name="
                            userItem.audioPushing
                              ? 'videoMeeting_openAudio'
                              : 'videoMeeting_closeAudio'
                          "
                          className="svgBox clickBox c_theme"
                        />
                      </el-tooltip>
                    </div>
                  </div>
                  <!-- 麦克风_针对自己操作 -->
                  <div v-else-if="userItem.deviceId === clientId">
                    <div v-if="userItem.muted === 1">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('cannotOperateDuringMuting')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_closeAudio"
                          className="svgBox c_dangerv2"
                        />
                      </el-tooltip>
                    </div>
                    <div v-else-if="!audioStatus">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('noMicrophone')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_closeAudio"
                          className="svgBox clickBox c_info"
                        />
                      </el-tooltip>
                    </div>
                    <div
                      v-else-if="userItem.audioPushing"
                      @click="audioPushFn()"
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('myMicrophoneIsOn')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_openAudio"
                          className="svgBox clickBox c_theme"
                        />
                      </el-tooltip>
                    </div>
                    <div v-else @click="audioPushFn()">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('myMicrophoneIsOff')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_closeAudio"
                          className="svgBox clickBox c_dangerv2"
                        />
                      </el-tooltip>
                    </div>
                  </div>
                  <!-- 麦克风_成员 -->
                  <div v-else>
                    <svg-icon
                      v-if="userItem.muted === 1"
                      svg-name="videoMeeting_closeAudio"
                      className="svgBox c_dangerv2"
                    />
                    <svg-icon
                      v-else-if="userItem.audioPushing"
                      svg-name="videoMeeting_openAudio"
                      className="svgBox c_theme"
                    />
                    <svg-icon
                      v-else
                      svg-name="videoMeeting_closeAudio"
                      className="svgBox c_dangerv2"
                    />
                  </div>

                  <!-- 摄像头-->
                  <div v-if="userItem.deviceId === clientId">
                    <div v-if="userItem.videoPushing" @click="videoPushFn()">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('myScreenIsOn')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_openVideov2"
                          className="svgBox clickBox c_theme"
                        />
                      </el-tooltip>
                    </div>
                    <div v-else @click="videoPushFn()">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('myScreenIsOff')"
                        placement="top-start"
                      >
                        <svg-icon
                          svg-name="videoMeeting_openVideov2"
                          className="svgBox clickBox c_dangerv2"
                        />
                      </el-tooltip>
                    </div>
                  </div>
                  <div v-else>
                    <svg-icon
                      v-if="userItem.videoPushing"
                      svg-name="videoMeeting_openVideov2"
                      className="svgBox c_theme"
                    />
                    <svg-icon
                      v-else
                      svg-name="videoMeeting_closeVideov2"
                      className="svgBox c_dangerv2"
                    />
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 会议操作区 -->
          <div
            @click="componentsFn('operationType', false)"
            :class="
              componentsObj.operationType ? 'componentsOpen' : 'componentsClose'
            "
            class="videoMeeting_operation relative z-20 bg-[var(--background)]"
          >
            <div class="components">
              <!-- 个人操作区 -->
              <ul
                class="fs_12 c_auxiliary videoMeeting_operation_dataList plr_20"
              >
                <!-- 本人话筒 -->
                <el-tooltip
                  v-if="!hostUserStatus && memberAudioStatus"
                  class="item"
                  effect="dark"
                  :content="memberAudioContent"
                  placement="top"
                >
                  <li class="centerBox css-text-no-select dangerv2">
                    <div class="centerBox svg_Box">
                      <svg-icon
                        svg-name="videoMeeting_closeAudio"
                        className="svgBox"
                      />
                    </div>
                    <p class="txt_box">{{ $t('myMicrophone') }}</p>
                  </li>
                </el-tooltip>
                <!-- 本人话筒 -->
                <el-tooltip
                  v-else
                  class="item"
                  effect="dark"
                  :content="audioContent"
                  placement="top"
                >
                  <li
                    :class="
                      audioStatus
                        ? audioPush
                          ? 'selectBox clickBox'
                          : 'dangerv2 clickBox'
                        : 'disableSelect'
                    "
                    @click="audioPushFn"
                    class="centerBox css-text-no-select"
                  >
                    <div class="centerBox svg_Box">
                      <svg-icon
                        :svg-name="
                          audioPush
                            ? 'videoMeeting_openAudio'
                            : 'videoMeeting_closeAudio'
                        "
                        className="svgBox"
                      />
                    </div>
                    <p class="txt_box">{{ $t('myMicrophone') }}</p>
                  </li>
                </el-tooltip>
                <!-- 本人画面 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="videoContent"
                  placement="top"
                >
                  <li
                    v-show="!shareStatus"
                    :class="
                      videoStatus
                        ? videoPush
                          ? 'selectBox clickBox'
                          : 'dangerv2 clickBox'
                        : 'disableSelect'
                    "
                    @click="videoPushFn"
                    class="centerBox css-text-no-select"
                  >
                    <div class="centerBox svg_Box">
                      <svg-icon
                        :svg-name="
                          videoPush
                            ? 'videoMeeting_openVideo'
                            : 'videoMeeting_closeVideo'
                        "
                        className="svgBox"
                      />
                    </div>
                    <p class="txt_box">{{ $t('myScreen') }}</p>
                  </li>
                </el-tooltip>
                <!-- 成员话筒 (禁言) -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="memberAudioContent"
                  placement="top"
                >
                  <li
                    v-if="hostUserStatus"
                    :class="memberAudioStatus ? 'dangerv2' : 'selectBox'"
                    @click="memberAudioFn(null, memberAudioStatus ? 2 : 1)"
                    class="centerBox clickBox css-text-no-select selectBox"
                  >
                    <div class="centerBox svg_Box">
                      <svg-icon
                        :svg-name="
                          memberAudioStatus
                            ? 'videoMeeting_memberCloseAudio'
                            : 'videoMeeting_memberOpenAudio'
                        "
                        className="svgBox"
                      />
                    </div>
                    <p class="txt_box">{{ $t('memberMicrophone') }}</p>
                  </li>
                </el-tooltip>
                <!-- 成员音频 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="memberSoundContent"
                  placement="top"
                >
                  <li
                    :class="memberSoundStatus ? 'dangerv2' : 'selectBox'"
                    @click="memberSoundFn()"
                    class="centerBox clickBox css-text-no-select selectBox"
                  >
                    <div class="centerBox svg_Box">
                      <svg-icon
                        :svg-name="
                          memberSoundStatus
                            ? 'videoMeeting_memberCloseSound'
                            : 'videoMeeting_memberOpenSound'
                        "
                        className="svgBox"
                      />
                    </div>
                    <p class="txt_box">{{ $t('memberAudio') }}</p>
                  </li>
                </el-tooltip>
                <!-- 更多功能 -->
                <el-tooltip
                  class="item flex items-center flex-shrink-0"
                  effect="dark"
                  :content="$t('moreFunctions')"
                  placement="top"
                >
                  <el-popover
                    placement="bottom"
                    trigger="click"
                    popper-class="popover_echarts popover_theme"
                  >
                    <ul
                      class="fs_12 c_auxiliary videoMeeting_operation_dataList py-2 px-5"
                    >
                      <!-- 成员列表 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('memberMeetingOperations')"
                        placement="top"
                      >
                        <li
                          :class="{
                            selectBox: componentsObj.userListComponentsType
                          }"
                          @click="
                            componentsFn(
                              'userListComponentsType',
                              componentsObj.userListComponentsType
                            )
                          "
                          class="centerBox clickBox css-text-no-select"
                        >
                          <div class="centerBox svg_Box">
                            <svg-icon
                              svg-name="videoMeeting_inviteMembers"
                              className="svgBox"
                            />
                          </div>
                          <p class="txt_box">
                            {{ $t('memberList')
                            }}<span v-show="joinedUserList.length"
                              >({{ joinedUserList.length }})</span
                            >
                          </p>
                        </li>
                      </el-tooltip>
                      <!-- 聊天区 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('textAndPicturesCanBeSentInTheChatArea')"
                        placement="top"
                      >
                        <li
                          :class="{ selectBox: componentsObj.memberChatType }"
                          @click="
                            componentsFn(
                              'memberChatType',
                              componentsObj.memberChatType
                            )
                          "
                          class="centerBox clickBox css-text-no-select"
                        >
                          <div class="centerBox svg_Box">
                            <svg-icon
                              svg-name="videoMeeting_remarks"
                              className="svgBox"
                            />
                          </div>
                          <p class="txt_box">{{ $t('chatArea') }}</p>
                        </li>
                      </el-tooltip>
                      <!-- 短信记录 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('youCanViewTheSentSMSRecords')"
                        placement="top"
                      >
                        <li
                          :class="{
                            selectBox: componentsObj.meetingSmsLogsType
                          }"
                          @click="
                            componentsFn(
                              'meetingSmsLogsType',
                              componentsObj.meetingSmsLogsType
                            )
                          "
                          class="centerBox clickBox css-text-no-select"
                        >
                          <div class="centerBox svg_Box">
                            <svg-icon
                              svg-name="alert_send_sms"
                              className="svgBox"
                            />
                          </div>
                          <p class="txt_box">{{ $t('sMSRecord') }}</p>
                        </li>
                      </el-tooltip>
                      <!-- 邀请成员 || 报警人 -->
                      <el-tooltip
                        class="item flex items-center flex-shrink-0"
                        effect="dark"
                        :content="$t('inviteMembersOrCallThePolice')"
                        placement="top"
                      >
                        <el-dropdown
                          placement="top"
                          trigger="click"
                          @visible-change="
                            visibleChange($event, 'addMemberDevices')
                          "
                          @command="handleCommand"
                        >
                          <li
                            :class="{
                              selectBox: operationStatus === 'addMemberDevices'
                            }"
                            class="centerBox clickBox css-text-no-select ml-[20px] text-auxiliary text-xs"
                          >
                            <div class="centerBox svg_Box">
                              <svg-icon
                                svg-name="icon_subordinateDepartments"
                                className="svgBox"
                              />
                            </div>
                            <p class="txt_box">{{ $t('inviteToConnect') }}</p>
                          </li>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="sendSms">{{
                              $t('sendSMS')
                            }}</el-dropdown-item>
                            <el-dropdown-item command="inviteDevices">{{
                              $t('addMembers')
                            }}</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-tooltip>
                    </ul>
                    <li
                      slot="reference"
                      class="centerBox clickBox css-text-no-select ml-[20px]"
                    >
                      <div class="centerBox svg_Box text-auxiliary">
                        <svg-icon
                          svg-name="icon_moreOptions"
                          className="svgBox"
                        />
                      </div>
                      <p class="txt_box">{{ $t('moreFunctions') }}</p>
                    </li>
                  </el-popover>
                </el-tooltip>
              </ul>
              <!-- 会议退出  -->
              <div class="h_100vh fs_12 r-f items-center">
                <div>
                  <el-button
                    @click="exitRoomFn"
                    size="small"
                    class="button_delete"
                    >{{ $t('exit') }}</el-button
                  >
                </div>
                <slot name="operator-exit-right"></slot>
              </div>
            </div>
            <div
              v-show="!componentsObj.operationType"
              class="w-full h-full absolute top-0 left-0 centerBox"
            >
              <svg-icon
                svg-name="videoMeeting_expansion_top"
                className="open_svgBox"
              />
            </div>
          </div>
        </div>
        <!--  聊天区  -->
        <div
          :class="{
            '!-bottom-[100%]': !componentsObj.memberChatType
          }"
          style="background: var(--background_mask)"
          class="c-f c_auxiliary userListComponents absolute left-[.5rem] min-w-[300px] w-[50%] rounded text-xs duration-500 bottom-[90px] z-[3000] h-[80%]"
        >
          <memberChat
            :uniqueId="uniqueId"
            :memberChatType="componentsObj.memberChatType"
            @on-messageReminderFn="messageReminderFn"
            ref="memberChat"
            class="components"
          ></memberChat>
        </div>
      </div>
    </div>
    <!-- 邀请设备 -->
    <inviteMembers ref="inviteMembers"></inviteMembers>
    <pageGraffiti ref="pageGraffiti"></pageGraffiti>
  </div>
</template>

<script>
import memberChat from '@components/videoMeeting/memberChat'
import videoMeeting from './js/index.js'
import meetingSms from './js/meetingSms.js'
export default {
  mixins: [videoMeeting, meetingSms],
  props: {},
  created() {},
  data() {
    return {
      /* 组件展示 */
      componentsObj: {
        monitorType: true,
        memberType: true,
        memberChatType: false,
        operationType: true,
        userListComponentsType: false, // 是否展开成员操作
        hostUserChangeComponentsType: false, // 是否展开更换主持人
        meetingSmsLogsType: false // 是否展开短信记录
      },
      /* 画面布局列表 */
      pictureLayoutList: [
        // {
        //   name: '设备区',
        //   svgName: 'videoMeeting_monitor',
        //   params: 'monitorType'
        // },
        {
          name: this.$t('memberArea'),
          svgName: 'videoMeeting_member',
          params: 'memberType'
        },
        {
          name: this.$t('messageArea'),
          svgName: 'videoMeeting_memberChat',
          params: 'memberChatType'
        }
      ],
      mapSettingsList: [
        {
          value: 'alarmPersonPosition',
          label: this.$t('positionOfAlarmPerson')
        },
        {
          value: 'dispatchingDeviceList',
          label: this.$t('dispatchingEquipment')
        },
        {
          value: 'locationUpdateRequest',
          label: this.$t('positionCalibration')
        }
      ],
      mapSettings: {
        alarmPersonPosition: true,
        dispatchingDeviceList: true,
        locationUpdateRequest: true
      }
    }
  },
  components: {
    memberChat
  },
  methods: {
    visibleChange(e, operationStatus) {
      if (e) {
        this.operationStatusFn(operationStatus)
      } else {
        this.operationStatusFn(null)
      }
    },
    // dropdown 下拉邀请操作
    handleCommand(command) {
      switch (command) {
        case 'sendSms':
          this.sendSms()
          break
        case 'inviteDevices':
          this.selectDeviceShow('inviteDevices')
          break
      }
    },
    // pageGraffitiShow (url) {
    //   this.$refs.pageGraffiti.show(url)
    // },
    mapSettingsFn() {
      this.$emit('on-mapSettingsFn', this.mapSettings)
    },
    initMap(uniqueId = null, gasCaseId = null) {
      if (!uniqueId) return
      this.uniqueId = uniqueId
      this.gasCaseId = gasCaseId
      this.memberVideoListStatus = null
      this.userId = this.userInfo.id
      this.clientId = this.userInfo.businessMqConnectInfo.clientId
      this.selectFn()
    },
    /* 退出房间 */
    exitRoomFn() {
      if (!this.roomId) return
      if (this.uniqueId) {
        this.$business.videoMeetingUnsubscribe(this.uniqueId)
        this.$business.canvasUnsubscribe(this.uniqueId)
      }
      if (this.videoStatus && this.videoStatus) {
        this.videoConsumerPaused(true)
      }
      if (this.shareScreenASender === this.userId) {
        if (this.shareStatus === 'shareScreen') {
          this.shareScreenEndFn()
        } else if (this.shareStatus === 'shareCanvas') {
          this.shareScreenEndFn('shareCanvasEnd')
        }
      }
      this.$nextTick(() => {
        this.$emit('on-exitRoom')
        this.$sdk.exitRoomFn(this.roomId)
        this.roomId = null
      })
    },
    /* 下发短信 */
    sendSms() {
      this.$emit('on-sendSms')
    },
    /* 通知成员被踢出房间 */
    kickOut({ userClientId }) {
      if (userClientId === this.clientId) {
        if (this.deviceCommandAuth === 2) {
          this.hostUserChangeType = true
        } else {
          // 如果成员无法操作，则直接关闭直播窗口
          this.loading = true
        }
        this.elementLoadingText = this.$t('pleaseCloseTheBrowserTab')
        if (this.videoStatus && this.videoStatus) {
          this.videoConsumerPaused()
        }
        if (this.shareScreenASender === this.userId) {
          if (this.shareStatus === 'shareScreen') {
            this.shareScreenEndFn()
          } else if (this.shareStatus === 'shareCanvas') {
            this.shareScreenEndFn('shareCanvasEnd')
          }
        }
        this.$emit('on-kickOut')
      }
    }
  },
  mounted() {
    this.loading = true
    // this.loading = false
  }
}
</script>

<style src="./css/index.less" scoped lang="less" rel="stylesheet/less"></style>

<style lang="less" rel="stylesheet/less">
.item_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
